<template>
  <div>
    <!-- 侧边导航栏 isOpen-控制是否展示二级导航 -->
    <div class="wSidebar" :class="{ isOpen: collapse }">
      <!-- 一级导航 -->
      <div class="wSidebar-classA">
        <div class="wSCA-box">
          <!-- 首页按钮 -->
          <div class="wSCA-index">
            <div class="wSCA-indexBtn" @click="wToRoot">
              <img
                class="wSCA-indexIcon"
                src="@/assets/image/wy_icon001.png"
                alt="首页"
                draggable="false"
              />
            </div>
          </div>
          <!-- 导航列表 -->
          <div class="wSCA-nav">
            <vue-scroll>
              <div class="wSCAN-list">
                <template v-for="(item, index) in items">
                  <!-- wActvie 控制选中值 -->
                  <div
                    class="wSCAN-item"
                    :class="item.index == onRoutes_classA ? 'wActive' : ''"
                    :key="index"
                    @click="wToNavPath(`${item.index}`)"
                  >
                    <i class="wSCANI-icon" :class="item.icon"></i>
                    <div class="wSCANI-text">{{ item.title }}</div>
                  </div>
                </template>
              </div>
            </vue-scroll>
          </div>
        </div>
      </div>
      <!-- 二级导航 -->
      <div class="wSidebar-classB" :class="{ isOpen: collapse }">
        <div class="wSCB-box">
          <!-- 导航列表 -->
          <div class="wSCB-nav">
            <vue-scroll>
              <div class="wSCBN-list">
                <div v-for="(item, index) in items" :key="index">
                  <template v-if="item.index == onRoutes_classA">
                    <div
                      v-for="(item01, index01) in item.subs"
                      class="wSCBN-item"
                      :class="item01.index == onRoutes_classB ? 'wActive' : ''"
                      :key="index01"
                      @click="wToNavPath(`${item.index}/${item01.index}`)"
                    >
                      <div class="wSCBNI-text">{{ item01.title }}</div>
                    </div>
                  </template>
                </div>
              </div>
            </vue-scroll>
          </div>
        </div>
      </div>
      <div class="zClearBoth"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // {
        //   icon: "el-icon-s-home", // 一级导航的图标
        //   index: "", // 唯一标志 ——是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        //   title: "", // 导航内容
        //   subs: [
        //     {
        //       index: "", // 唯一标志 ——是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        //       title: "", // 导航内容
        //       subs: [], // 子导航，总共层级不超过三级，没有这没有这个字段
        //     },
        //   ], // 子导航，总共层级不超过三级，没有这没有这个字段
        // },
        {
          icon: "el-icon-s-tools", // 一级导航的图标
          index: "set", // 唯一标志 eg: http://localhost:8080/admin/set/index 这个地址中的admin后面的set
          title: "设置", // 一级导航的文字
          // 子导航，总共层级不超过二级，没有这没有这个字段
          // subs: [
          //   {
          //     index: "index", // 唯一标志 eg: http://localhost:8080/admin/set/index 这个地址中的admin后面的set后面的index
          //     title: "测试栏目", // 导航内容
          //   },
          // ],
        },
      ],
    };
  },
  computed: {
    // 侧边栏二级导航是否关闭
    collapse() {
      return this.$store.state.sidebarClassB;
    },
    // 当前路由的地址-和侧边栏的index做选中操作
    onRoutes_classA() {
      // console.log(this.$route.path);
      let wPathAll = this.$route.path;
      let wPathArr = wPathAll.split("/");
      let wClassAPath = wPathArr[2];
      // console.log(wClassAPath);

      // 判断是否有二级
      for (let i = 0; i < this.items.length; i++) {
        if (wClassAPath == this.items[i].index) {
          let itemsSubs = this.items[i].subs;
          if (itemsSubs && itemsSubs.length > 0) {
            // 有二级导航
            // 修改是否有二级导航
            this.$store.commit("sidebarClassB", 1);
          } else {
            // 没有二级导航
            // 修改是否有二级导航
            this.$store.commit("sidebarClassB", 2);
          }
        }
      }

      return wClassAPath;
    },
    onRoutes_classB() {
      // console.log(this.$route.path);
      let wPathAll = this.$route.path;
      let wPathArr = wPathAll.split("/");
      let wClassBPath = wPathArr[3];
      // console.log(wClassBPath);
      return wClassBPath;
    },
  },
  mounted() {},
  methods: {
    /**
     * wToRoot
     * 回到主页
     */
    wToRoot() {
      this.$router.push({ path: "/" });
      // 修改是否有二级导航
      this.$store.commit("sidebarClassB", 2);
    },

    /**
     * wToNavPath
     * 一级导航和二级导航页面跳转
     * wP_path 页面路径
     */
    wToNavPath(wP_path) {
      let wUrlPath = `/admin/${wP_path}`;
      // 页面跳转
      this.$router.push({ path: wUrlPath });
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/publicStyle.less";

// 侧边导航栏
.wSidebar {
  position: fixed;
  width: @wWidth_sidebar_c;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  transition: all 0.3s;
  user-select: none;

  &.isOpen {
    width: @wWidth_sidebar_o;
    transition: all 0.3s;
  }

  // 一级导航
  .wSidebar-classA {
    display: block;
    width: @wWidth_sidebar_c;
    height: 100%;
    float: left;
    background-color: #333844;

    .wSCA-box {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;

      // 首页
      .wSCA-index {
        display: flex;
        width: 100%;
        height: 80px;
        justify-content: center;
        align-items: center;

        .wSCA-indexBtn {
          flex: none;
          display: flex;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background-color: @wColor_theme;
          color: #ffffff;
          font-size: 16px;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          cursor: pointer;

          .wSCA-indexIcon {
            flex: none;
            width: 16px;
          }
        }
      }

      // 导航列表
      .wSCA-nav {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;

        .wSCAN-list {
          display: block;
          width: 100%;

          .wSCAN-item {
            display: flex;
            width: 100%;
            height: 44px;
            line-height: 44px;
            padding-left: 16px;
            box-sizing: border-box;
            font-size: @wFontSize;
            color: #c9cfd5;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;

            &:hover {
              color: #ffffff;
            }

            &.wActive {
              color: @wColor_theme;
              background-color: #ffffff;
            }

            .wSCANI-icon {
              flex: none;
              margin-right: 5px;
              font-size: @wFontSize + 2px;
            }

            .wSCANI-text {
              flex: auto;
              line-height: inherit;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  // 二级导航
  .wSidebar-classB {
    display: none;
    width: @wWidth_sidebar_c;
    height: 100%;
    float: left;
    background-color: #ffffff;
    border-right: 1px solid #eee;
    box-sizing: border-box;

    &.isOpen {
      display: block;
    }

    .wSCB-box {
      display: block;
      width: 100%;
      height: 100%;
      padding: 50px 0 10px;
      box-sizing: border-box;

      // 导航列表
      .wSCB-nav {
        display: block;
        width: 100%;
        height: 100%;

        .wSCBN-list {
          display: block;
          width: 100%;
          padding: 0 5px;
          box-sizing: border-box;

          .wSCBN-item {
            display: block;
            width: 100%;
            line-height: 20px;
            padding: 10px 5px;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 8px;
            color: #666;
            cursor: pointer;
            font-size: @wFontSize;

            &:hover {
              color: #333333;
              background-color: #f6f8fb;
              border-radius: 4px;
            }

            &.wActive {
              color: @wColor_theme;
            }
          }
        }
      }
    }
  }
}
</style>